<script defer>
function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}
var videoLoaders = [];
{% for video in site.data.videos %}	
function loadVideo{{video.id}}(){
       // prepare the request
       var request = gapi.client.youtube.search.list({
            part: "snippet",
            type: "video",
            q: "{{video.id}}",
            maxResults: 1,
            order: "relevance",
            publishedAfter: "2018-01-01T00:00:00Z"
       }); 
       request.execute(function(response) {
          var results = response.result;
          $("#{{video.id}}").html("");
          $.each(results.items, function(index, item) {
            $.get("tpl/item.html", function(data) {
                $("#{{video.id}}").append(tplawesome(data, [{"title":"", "videoid":item.id.videoId}]));
            });
          });
          resetVideoHeight();
       });
    }
 	videoLoaders.push(loadVideo{{video.id}});
		{% endfor %}
    $(window).on("resize", resetVideoHeight);
function resetVideoHeight() {
    $(".video").css($("#{{video.id}}").height(), $("#{{video.id}}").width() * 9/16);
}

function init() {
    gapi.client.setApiKey("AIzaSyCaUW8F0wJ5luBWdatD9vibEhExDzUMMKU");
    gapi.client.load("youtube", "v3", function() {
        // yt api is ready
        console.log("YouTube API ready");
		setTimeout(function(){
			for (var i=0; i < videoLoaders.length; i++){
				videoLoaders[i]();
			}
		}, 2000);
    });
	
}

</script>
<script defer src="https://apis.google.com/js/client.js?onload=init"></script>